<template>
  <div class="box_ledger">
    <!-- 面包屑盒子 -->
    <div class="bread">
      <span>统计分析</span> >
      <span>台账记录</span>
    </div>
    <div class="box_leger">
    <h3>台账记录</h3>
    <!-- 选项卡 -->
    <div>
      <el-tabs v-model="invent"  @tab-click="handleClick">
        <el-tab-pane label="教学设备台账" name="first">
          <!-- 搜索框 -->
        <div class="search_teach">
          <p>资产目录：</p>
          <div class="search_father">
            <el-input
              v-model="input_ledger_jx"
              placeholder="请输入内容"
              class="search"
            ></el-input>
            <el-button type="primary" @click="ledger_jx_search">查询</el-button>
            <el-button  @click="ledger_jx_toExcel">导出Excel</el-button>
          </div>
        </div>
          <!-- 教学设备库存数据表 -->
          <div>
            <el-table :data="ledgerData_jx" border style="width: 100%" id="ledgerData_jx_id">
              <el-table-column prop="facilityEncoding" label="编码" width="180">
              </el-table-column>
              <el-table-column prop="className" label="一级目录" width="180">
              </el-table-column>
              <el-table-column
                prop="facilityAmount"
                label="库存数量"
              ></el-table-column>
              <el-table-column
                prop="repairsNum"
                label="借出数量"
              ></el-table-column>
              <el-table-column
                prop="num"
                label="挂失数量"
              ></el-table-column>
              <el-table-column
                prop="scrapNum"
                label="报废数量"
              ></el-table-column>
              <el-table-column
                prop="facilityAmount,repairsNum,num,scrapNum"
                label="累计数量"
              >
            <template slot-scope="scope">
              {{ scope.row.facilityAmount+scope.row.repairsNum+scope.row.num+scope.row.scrapNum }}
            </template>
            </el-table-column>
              <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                  <span @click="check_two(scope.$index, scope.row)"
                    >查看下级目录</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="易耗品台账" name="second">
          <!-- 搜索框 -->
        <div class="search_teach">
          <p>资产目录：</p>
          <div class="search_father">
            <el-input
              v-model="input_ledger_yhp"
              placeholder="请输入内容"
              class="search"
            ></el-input>
            <el-button type="primary" @click="input_ledger_search">查询</el-button>
            <el-button  @click="input_ledger_toExcel">导出Excel</el-button>
          </div>
        </div>
          <div>
            <el-table :data="ledgerData_yhp" border style="width: 100%" id="ledgerData_yhp_id">
              <el-table-column prop="cnumber" label="编码" width="180">
              </el-table-column>
              <el-table-column prop="cname" label="一级目录" width="180">
              </el-table-column>
              <el-table-column
                prop="cnum"
                label="库存数量"
              ></el-table-column>
              <el-table-column
                prop="cdistributeNum"
                label="分发数量"
              ></el-table-column>
              <el-table-column
                prop="creceiveNum"
                label="领取数量"
              ></el-table-column>
              <el-table-column
                prop="cwriteNum"
                label="核销数量"
              ></el-table-column>
              <el-table-column
                prop="cnum,cdistributeNum,creceiveNum,cwriteNum"
                label="累计数量"
              >
              <template slot-scope="scope">
                  {{ scope.row.cnum+scope.row.cdistributeNum+scope.row.creceiveNum+scope.row.cwriteNum }}
                </template>
            </el-table-column>
              <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                  <span @click="check_two(scope.$index, scope.row)"
                    >查看下级目录</span
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  </div>
 
</template>
  <script>
import statistics_serive from "../../serive/statistics";
import myExcel from '../../utils/toExcel'

export default {
  name: "inventory",
  data() {
    return {
      muLu: ["一级目录", "二级目录"],
      // 搜索框输入的数据
      input_ledger_jx:'',
      input_ledger_yhp: "",
      invent: "first",
      // 教学设备台账数据
      ledgerData_jx: [],
      // 副本数据
      ledgerData_jx_B: [],

      // 易耗品台账数据
      ledgerData_yhp:[],
      ledgerData_yhp_B:[]
    };
  },
  mounted() {
    // 渲染教学设备台账
      statistics_serive.select_ledger_jx('','','','','',10,1).then((res)=>{
        // console.log(res.data.data);
        // 教学设备台账数据放到数组中
        this.ledgerData_jx=res.data.data
        this.ledgerData_jx_B=res.data.data
        console.log(this.ledgerData_jx);
      })
    // 渲染易耗品台账
    statistics_serive.select_ledger_yhp('','','','','',10,1).then((res)=>{
        // console.log(res.data.data);
        // 教学设备台账数据放到数组中
        this.ledgerData_yhp=res.data.data
        this.ledgerData_yhp_B=res.data.data
        console.log(this.ledgerData_yhp);
      })
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 查看下级目录
    check_two(index, row) {
      // console.log(index, row);
    },
    // 教学设备台账搜索
    ledger_jx_search(){
      let arr = [];
      for (let i = 0; i < this.ledgerData_jx_B.length; i++) {
        if (this.ledgerData_jx_B[i].className.includes(this.input_ledger_jx.trim())) {
          arr.push(this.ledgerData_jx_B[i]);
        }
      }
      this.ledgerData_jx = arr;
      arr=[]
    },
    // 易耗品台账搜索
    input_ledger_search(){
      let arr = [];
      for (let i = 0; i < this.ledgerData_yhp_B.length; i++) {
        if (this.ledgerData_yhp_B[i].cname.includes(this.input_ledger_yhp.trim())) {
          arr.push(this.ledgerData_yhp_B[i]);
        }
      }
      this.ledgerData_yhp = arr;
      arr=[]
    },
    // 导出
    ledger_jx_toExcel(){
      myExcel.getExcel("#ledgerData_jx_id","教学设备台账记录")
    },
    input_ledger_toExcel(){
      myExcel.getExcel("#ledgerData_yhp_id","易耗品台账记录")
    }
  },
};
</script>
  <style>
  .box_ledger{
    width: 100%;
    overflow-y:auto;
  height: 600px;
}
.bread{
  margin-left: 20px;
  padding-top: 20px;
}
.box_leger {
  background-color: #ffffff;
  margin: 20px;
  padding: 20px;
}
/* 搜索框 */
.search_teach {
  display: flex;
  justify-content: space-between;
}
.search {
  width: 300px;
}
</style>